<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>dep_manage</title>		
		<link rel="stylesheet" type="text/css" href="/css/curd.css"/>
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="/css/healthManage.css"/>
		<script src="/js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1 class="text-center">手术科室管理</h1>
		<div class="container">
			<table class="table table-bordered table-striped table-hover curd-table">
				<thead>
					<tr>
						<th>序号</th>
						<th>科室名称</th>
						<th>科室介绍</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr th:each="sub : ${operative}">
						<td th:text="${sub.subjectId}">1</td>
						<td th:text="${sub.subjectName}">外科学系</td>
						<td th:text="${sub.subjectDescription}">我是一段介绍</td>
						<td>
							<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#myModal" id="edit-btn" th:data-des="${sub.subjectDescription}" th:data-id="${sub.subjectId}">编辑科室</button>
							<a class="btn btn-danger" role="button" th:href="@{/deleteOpeSub(subjectId=${sub.subjectId})}">删除科室</a>
						</td>
					</tr>
				</tbody>
			</table>
			<!--分页-->
			<div class="row">
				<div class="col-md-6">
					当前<span th:text="${pageInfo.pageNum}"></span>页,
					总<span th:text="${pageInfo.pages}"></span>页,
					总<span th:text="${pageInfo.total}"></span>条记录
				</div>
				<div class="col-md-6">
					<nav aria-label="Page navigation" >
						<ul class="pagination pagination-lg">
							<!--s首页-->
							<li><a href="/opeUi?pageNum=1">首页</a></li>
							<!--上一页-->
							<li th:if="${pageInfo.hasPreviousPage}" class="sx">
								<a th:href="@{/opeUi(pageNum=${pageInfo.pageNum - 1})}" aria-label="Previous">
									<span aria-hidden="true">&laquo;</span>
								</a>
							</li>
							<!--遍历-->
							<li th:each="page_Num : ${pageInfo.navigatepageNums}" th:classappend="${page_Num == pageInfo.pageNum}? 'active'">
								<a th:href="'/opeUi?pageNum='+${page_Num}" th:text="${page_Num}"></a>
							</li>
							<!--下一页-->
							<li th:if="${pageInfo.hasNextPage}" class="sx">
								<a th:href="@{/opeUi(pageNum=${pageInfo.pageNum + 1})}" aria-label="Next">
									<span aria-hidden="true" >&raquo;</span>
								</a>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</div>

		<!-- 编辑科室模态框） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4>编辑科室介绍</h4>
					</div>
					<div class="modal-body">
						<form th:action="@{/updateSub2}" id="updateForm">
							<input type="text" id="updateId" hidden="hidden" name="subjectId">
							<textarea class="form-control" rows="3" id="textArea" name="subjectDescription">

						   </textarea>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="submit" class="btn btn-primary" form="updateForm" id="qd">确定</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		<script>
			$('#myModal').on('show.bs.modal',function (e) {
				let button = $(e.relatedTarget);
				let des = button.data('des');
				let id = button.data('id');
				$('#updateId').val(id);
				$('#textArea').val(des);
			})


		</script>
	</body>
</html>
